<template>
  <div class="subject">
    <div class="head">
      <h1>大学生志愿者活动</h1>
      <div class="head-box1">
        <div class="img">
          <el-row>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          </el-row> 
        </div>
        <div class="btn">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="head-box2">
       <span>
        <img alt="Vue logo" class="active" src="../assets/svg/active.svg" width="40" height="40" />
        <p>认领活动</p>
      </span>
      <span>
        <img alt="Vue logo" class="active" src="../assets/svg/statement.svg" width="40" height="40" />
        <p>爱心报表</p>
      </span>
      <span>
        <img alt="Vue logo" class="active" src="../assets/svg/record.svg" width="40" height="40" />
        <p>服务实纪</p>
      </span>
      <span>
        <img alt="Vue logo" class="active" src="../assets/svg/server.svg" width="40" height="40" />
        <p>我的服务</p>
      </span>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-box">
        <span class="bottom-box1">志愿活动</span>
        <span class="bottom-box2">查看更多
          <el-icon><ArrowRight /></el-icon>
        </span>
      </div>
    </div>
  </div>
</template>


<style scoped>
* {
  margin: 0px;
  padding: 0px;
}

.subject {
  background-color: aqua;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.head {
  width: 100%;
  height: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 10px;
}

.head h1{
  color: white;
}

.bottom {
  width: 100%;
  height: 85vh;
  background-color: 	#BBFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.head-box1,
.head-box2 {
  padding: 10px;
  border-radius: 10px;
  
}

.head-box1 {
  background-color: #F0FFFF;
  width: 80%;
  height: 45%;
  position: absolute;
  top: 115px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head-box2 {
    display: flex;
    justify-content: space-between;
    width: 80%; 
    padding: 10px; 
    border-radius: 10px;

  }

  .head-box2 span {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(25% - 20px);
  }

  .head-box2 span img.icon {
    margin-bottom: 10px; 
  }
  .head-box2 span p{
    font-size: 13px;
  }
.btn{
  display: flex;
  justify-content: center;
}

.head-box2 {
  background-color: #F0FFFF;
  width: 80%;
  height: 65%;
  position: absolute;
  top: 200px;
}
.bottom-box {
  width: 100%;
  height: 78%;
  background-color: 	#F0FFFF;
  display: flex;
  margin-top: auto;
  justify-content: space-between;
}
.bottom-box span{
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}


</style>
